<script setup>
import { ref, computed, watch } from 'vue'
import axios from "axios";
import CryptoJS from "crypto-js"
import { backUrl } from "../../assets/js/setting.js";
import { ArrowRight } from '@element-plus/icons-vue'

const smsCode = ref('') //验证码
const MsgBox = ref(false) //是否显示提示框
const BoxMsg = ref('')
let accountNumRecord = ''
const hasSendSms = ref(false)
const accountNum = ref('') //账号名
const password = ref() //密码
const password_twice = ref() //密码

const register = defineModel('register', { default: false })
const login = defineModel('login', {})

axios.defaults.baseURL = backUrl;


//密码是否已输入
const hasPwd = computed(() => {
  if (password.value === undefined) {
    return false
  } else if (password.value.length === 0) {
    return false
  }
  return true
})
const hasPwd2 = computed(() => {
  if (password_twice.value === undefined) {
    return false
  } else if (password_twice.value.length === 0) {
    return false
  }
  return true
})

watch(accountNum, () => {
  MsgBox.value = false;
  BoxMsg.value = ''
})
watch(password, () => {
  MsgBox.value = false;
  BoxMsg.value = ''
})
watch(smsCode, () => {
  MsgBox.value = false;
  BoxMsg.value = ''
})
watch(password_twice, () => {
  MsgBox.value = false;
  BoxMsg.value = ''
})

function checkAcount(num) {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const cnPhoneRegex = /^1[3-9][0-9]{9}$/;
  if (num.match(emailRegex)) {
    return 2
  }
  else if (num.match(cnPhoneRegex)) {
    return 1
  }
  return 0
}

function clickRegisterBtn() {
  if (accountNum.value !== accountNumRecord) {
    MsgBox.value = true
    BoxMsg.value = '账号已变更，请重新获取验证码'
    hasSendSms.value = false
    return
  } else if (smsCode.value.length !== 6) {
    MsgBox.value = true
    BoxMsg.value = '请输入正确格式的验证码'
    return
  } else if (!hasPwd.value) {
    MsgBox.value = true
    BoxMsg.value = '请输入密码'
    return
  } else if (!hasPwd2.value) {
    MsgBox.value = true
    BoxMsg.value = '请再次输入密码'
    return
  } else if (password.value !== password_twice.value) {
    MsgBox.value = true
    BoxMsg.value = '两次密码输入不一致'
    return
  }
  BoxMsg.value = ''
  //登录校验
  axios({
    url: '/BuildMind/user/register',
    method: 'POST',
    data: {
      email: accountNum.value,
      verification_code: smsCode.value,
      password_hash: CryptoJS.SHA256(password.value).toString(),
    },
  }).then((response) => {
    MsgBox.value = true
    if (response.status !== 200) {
      BoxMsg.value = response.data.message
    } else {
      BoxMsg.value = response.data.message
      //跳转
      location.href = "./BUILD-MIND";
    }
  }).catch((error) => {
    console.log(error.data)
    if (error.response) {
      MsgBox.value = true
      BoxMsg.value = error.response.data.message
    }
    else if (error.request) {
      MsgBox.value = true
      BoxMsg.value = '网络错误'
    }
  })
}

function clickSmsBtn() {
  if (checkAcount(accountNum.value) === 0) {
    MsgBox.value = true;
    BoxMsg.value = '请输入正确格式的邮箱'
    accountNumRecord = ''
    hasSendSms.value = false
    return;
  }
  else if (accountNum.value !== accountNumRecord) {
    BoxMsg.value = ''
    smsCode.value = ''
    accountNumRecord = accountNum.value
  } else if (hasSendSms.value === true) {
    MsgBox.value = true;
    BoxMsg.value = '验证码已发送'
    return;
  } else {
    BoxMsg.value = ''
    smsCode.value = ''
    accountNumRecord = accountNum.value
  }
  //申请验证码
  axios({
    url: '/BuildMind/user/register/get_verified',
    method: 'get',
    params: {
      email: accountNum.value
    },
  }).then((response) => {
    MsgBox.value = true
    BoxMsg.value = response.data.message
    hasSendSms.value = true
  }).catch((error) => {
    console.log(error)
    if (error.response) {
      MsgBox.value = true
      BoxMsg.value = error.response.data.message
    }
    else if (error.request) {
      MsgBox.value = true
      BoxMsg.value = '网络错误'
    }
  })
  hasSendSms.value = true
}

function toLogin() {
  register.value = false
  login.value = true
}

</script>

<template>
  <div class="register-box">
    <div>注册账号</div>
    <div class="form-register">
      <div class="form">
        <div id="register-form" :style="{ 'display': 'block' }">
          <!--邮箱、验证码输入框主体-->
          <form id="smsregister" method="post" onsubmit="return false;">
            <el-space direction="vertical" fill>
              <!--邮箱输入框-->
              <el-input id="account-number" v-model="accountNum" class="form-input" placeholder="请输入邮箱" clearable />
              <!--验证码输入框-->
              <div class="captcha-input">
                <input id="register-sms-code" autocomplete="off" placeholder="请输入验证码" type="text" v-model="smsCode"
                  :disabled="!hasSendSms" maxlength="6">
                <button id="register-send-sms-code-btn" :disabled="accountNum.length === 0" @click="clickSmsBtn">
                  获取验证码
                </button>
              </div>
              <!--密码输入框-->
              <el-input id="password" placeholder="请输入密码" type="password" v-model="password" class="form-input"
                clearable show-password />
              <!--密码二次输入框-->
              <el-input id="password-twice" placeholder="请再次输入密码" type="password" v-model="password_twice"
                class="form-input" clearable show-password />
              <!--提示信息-->
              <el-text class="msg-wrap" v-if="MsgBox" type="warning">
                {{ BoxMsg }}
              </el-text>
              <!-- 注册按钮 -->
              <el-button id="register-submit" class="submit-btn" :disabled="!hasSendSms" @click="clickRegisterBtn">注册
              </el-button>
            </el-space>
          </form>
        </div>
      </div>
    </div>
    <!--登录-->
    <div class="to-login">
      <el-button text @click="toLogin">
        回到登录界面
        <el-icon>
          <ArrowRight />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<style scoped>
/* 注册框整体布局 */
.register-box {
  width: 520px;
  margin: 0 auto;
  padding: 40px 50px;
  background-color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* 标题样式 */
.register-box>div:first-child {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 32px;
  color: #333;
}

/* 表单容器 */
.form-register {
  width: 100%;
}

/* 输入框基础样式 */
:deep(.el-input__wrapper) {
  padding: 1px 16px;
  height: 40px;
  background-color: #FAFAFA;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  box-shadow: none !important;
}

/* 验证码输入框组样式 */
.captcha-code {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 12px;
}

:deep(.captcha-code .el-input) {
  width: calc(100% - 132px) !important;
  /* 120px按钮宽度 + 12px间距 */
}

:deep(.captcha-code .el-input__wrapper) {
  width: 100%;
}

:deep(.captcha-code .el-input-group__append) {
  position: absolute;
  right: -132px;
  /* -(按钮宽度 + 间距) */
  padding: 0;
  background: none;
  border: none;
}

/* 验证码按钮样式 */
:deep(#register-send-sms-code-btn) {
  width: 120px;
  height: 40px;
  padding: 0;
  font-size: 14px;
  color: #409eff;
  border: 1px solid #409eff;
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
  white-space: nowrap;
}

:deep(#register-send-sms-code-btn:hover) {
  background-color: #ecf5ff;
}

:deep(#register-send-sms-code-btn:disabled) {
  color: #999;
  border-color: #E8E8E8;
  background-color: #FAFAFA;
}

/* 提交按钮样式 */
.submit-btn {
  width: 100%;
  height: 40px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #409eff;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.submit-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

/* 错误提示信息 */
.msg-wrap {
  width: 100%;
  padding: 8px 16px;
  margin: 4px 0;
  font-size: 14px;
  color: #ff4d4f;
  background-color: #fff2f0;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 登录按钮容器 */
.to-login {
  display: flex;
  justify-content: flex-end;
  /* 右对齐 */
  margin-top: 16px;
}

:deep(.to-login .el-button) {
  color: #999;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.to-login .el-button:hover) {
  color: #409eff;
}

/* 统一间距 */
:deep(.el-space) {
  --el-space-y: 16px !important;
  width: 100%;
}

/* 处理自动填充样式 */
:deep(.el-input__inner:-webkit-autofill) {
  -webkit-box-shadow: 0 0 0 1000px #FAFAFA inset !important;
  -webkit-text-fill-color: #333 !important;
}

/* 验证码输入框容器 */
.captcha-input {
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 12px;
}

/* 验证码输入框 */
.captcha-input input {
  width: calc(100% - 132px);
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background-color: #FAFAFA;
  box-sizing: border-box;
}

/* 验证码按钮 */
.captcha-input button {
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
  height: 100%;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  border-radius: 8px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 12px;
}

.captcha-input button:hover {
  background-color: #ecf5ff;
}

.captcha-input button:disabled {
  cursor: not-allowed;
  color: #999;
  border-color: #E8E8E8;
  background-color: #FAFAFA;
}

/* 输入框placeholder样式 */
.captcha-input input::placeholder {
  color: #999;
}

/* 统一所有输入框的样式 */
input[type="text"],
input[type="password"],
:deep(.el-input__inner) {
  border-radius: 8px;
}

/* 提交按钮样式 */
.submit-btn {
  border-radius: 8px;
}
</style>
